.list {
  &:hover {
    .title {
      .more {
        @apply text-sm;
      }
    }
  }

  .title {
    @apply flex h-5 items-center text-white mt-5 mb-4;

    .tag {
      @apply font-normal text-white-80 text-xl leading-5;
    }

    .more {
      transition: all 0.2s inline-block;
      @apply text-theme ml-4;
      font-size: 0;
    }
  }

  .items {
    @apply w-full flex flex-wrap;

    .item {
      @apply block cursor-pointer mr-4 mb-4 text-white text-xs rounded-lg;
      background-image: url('/images/live-bg-inactive.png');
      background-size: 100% 100%;

      &:hover {
        transition: all 0.3s;
        transform: scale(1.2);
        background-image: url('/images/live-bg-active.png');
      }

      img {
        @apply w-full h-full rounded;
      }
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .listPhone {
    margin: 0 !important;

    .title {
      @apply px-4 h-5 justify-between;

      .more {
        @apply mr-0 text-sm;
      }

      .tag {
        font-size: 1.25rem !important;
      }
    }

    .items {
      @apply m-0 flex-nowrap overflow-x-auto;

      .item {
        @apply shrink-0;
      }

      .item:hover {
        transform: scale(1);
      }
    }
  }
}
